<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>外边距</title>
		<style>
			*{    /* 通配符:初始化所有标签的内边距和外边距 */
				margin: 0;
				padding: 0;
				}
				.box{
					width:300px;
					height:300px;
					background-color:green;
					margin-bottom: 120px;
					/* margin: 50px auto; */
				}
				.box2{
				    width:300px;
					height: 300px;
					background-color: pink;
					margin-bottom: 80px;
				}
				.bigbox{
					width:600px ;
					height: 600px;
					background-color: deepskyblue;
					margin-top: 100px;
					/* border: 1px solid black; */
					/* padding-top: 100px; */						
					overflow: hidden;
				}
				.sbox{
					width: 300px;
					height: 300px;
					background-color:plum;
					margin-top: 100px;
				}
		</style>
		<!-- 外边距：margin
		 1，概念:盒子与盒子之间的距离
		2,应用：
			2.1 可以让块级盒子水平居中，前提条件是盒子有宽度，再给左右外边距设置为auto（自动的）
			2.2 初始化所有标签的内外边距。
		3.相邻块级盒子垂直外边距合并问题 &gt; 一般在开发中只给其中一个盒子写外边距。
		4.嵌套块级盒子外边距塌陷问题 &gt;解决方式：
		方式1:给父盒子添加边框
		方式2：给父盒子添加内边距
		方式3:给父盒子添加overflow：hidden；  [开发中常用的] 
		-->
	</head>
	<body>
		<div class="box"></div>
		<div class="box2"></div>
		<div class="bigbox">
			<div class="sbox"></div>
		</div>
	</body>
</html>